<template>
  <div style="padding: 0 15px;">

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height:32px;">
              <i class="el-icon-s-tools" /> &nbsp; 管理信息
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right;">
          <div class="grid-content bg-purple">
            <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible = true">新增角色</el-button>
            <el-button size="small" type="primary" icon="el-icon-remove-outline">删除角色</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="divider" />

      <el-row :gutter="15" class="whererow">
        <el-col :span="4" style="line-height:32px;">当前共7个角色。</el-col>
        <el-col :span="6">
          <el-input v-model="search" type="text" size="small" placeholder="请输入角色名称">
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-col>
      </el-row>

    </div>

    <div class="noticerow box">
      <i class="el-icon-edit" /> &nbsp; 已选择了0项
    </div>

    <el-table
      ref="multipleTable"
      border
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="编号" width="60">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="角色名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="角色描述">
        <template slot-scope="scope">{{ scope.row.description }}</template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="200">
        <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
      </el-table-column>
      <el-table-column align="center" label="启用" width="200">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" active-color="#1aa" inactive-color="#aaa" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="170">
        <template slot-scope="scope">
          <el-button title="分配权限" type="success" size="mini" icon="el-icon-edit" circle @click="$router.push('/system/assignment')" />
          <el-button title="编辑角色" type="warning" size="mini" icon="el-icon-edit" circle @click="editDialogVisible = true" />
          <el-button title="删除角色" type="danger" size="mini" icon="el-icon-delete" circle @click="$router.push('#'+scope.row.id)" />
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination">
      <el-cascader v-model="value" size="small" :options="options" />
      <el-pagination
        background
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="400"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 新增角色的弹窗 -->
    <el-dialog width="40%" title="添加角色" :visible.sync="addDialogVisible" :modal-append-to-body="false">
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="cuser" label-width="80px" size="small">
            <el-form-item label="角色名称">
              <el-input v-model="cresource.name" />
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input v-model="cresource.description" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用">
              <el-radio-group v-model="cresource.enable">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item size="large">
              <el-button type="primary">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 修改角色的弹窗 -->
    <el-dialog width="40%" title="修改角色" :visible.sync="editDialogVisible" :modal-append-to-body="false">
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="cuser" label-width="80px" size="small">
            <el-form-item label="角色名称">
              <el-input v-model="cresource.name" />
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input v-model="cresource.description" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用">
              <el-radio-group v-model="cresource.enable">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item size="large">
              <el-button type="primary">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      cresource: {},
      addDialogVisible: false,
      editDialogVisible: false,
      roleDialogVisible: false,
      search: '',
      selectRoles: '',

      currentPage: 3,
      input: '',
      value: '',
      options: [{
        value: 'enable',
        label: '启用'
      }, {
        value: 'disable',
        label: '禁用'
      }],
      tableData: [{
        id: '01',
        name: '角色名称',
        description: '资源描述',
        gmtCreate: '2011-11-11 11:11:11'
      }, {
        id: '01',
        name: '角色名称',
        description: '资源描述',
        gmtCreate: '2011-11-11 11:11:11'
      }, {
        id: '01',
        name: '角色名称',
        description: '资源描述',
        gmtCreate: '2011-11-11 11:11:11'
      }, {
        id: '01',
        name: '角色名称',
        description: '资源描述',
        gmtCreate: '2011-11-11 11:11:11'
      }, {
        id: '01',
        name: '角色名称',
        description: '资源描述',
        gmtCreate: '2011-11-11 11:11:11'
      }]
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
